<template>
  <Dialog title="开始回访" :loading="loading" class="single-column" :visible="visible" :reveal="true" button-text="保存" @close="handleClose" @confirm="balanceSubmit">
    <!-- 回访记录 -->
    <div>
      <el-form ref="ruleForm" :model="currentRow" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="顾客：">{{ currentRow.customerName }}</el-form-item>
        <el-form-item label="回访类型：">{{ currentRow.returnVisitType }}</el-form-item>
        <el-form-item label="关联项目：">{{ currentRow.relationProjectName }}</el-form-item>
        <el-form-item label="回访电话：">{{ currentRow.customerPhone }}</el-form-item>
        <el-form-item label="计划回访日期：">{{ currentRow.plannedReturnVisitDate }}</el-form-item>
        <el-form-item label="计划回访人：">{{ currentRow.revisiterName }}</el-form-item>
        <!-- <el-form-item label="计划备注：">{{ currentRow.remarks }}</el-form-item> -->
        <el-form-item label="回访结果：">
          <!-- <el-input v-model="currentRow.returnVisitContent" type="textarea" :rows="2" /> -->
          <editor-content class="editor__content box" :editor="editor" />
        </el-form-item>
      </el-form>
    </div>
  </Dialog>
</template>
<script>
import Dialog from "@/components/Dialog";
import { Editor, EditorContent } from "tiptap";
export default {
  components: {
    Dialog,
    EditorContent,
  },
  filters: {
    phoneHandle(val) {
      if (!val) return '';
      let phone = "";
      phone = val.substring(0, 3) + "****" + val.substring(val.length - 4, val.length);
      return phone;
    },
  },
  props: {
    currentRow: {
      type: Object,
      default: () => ({}),
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      templateData: {
        template: ``,
      },
      editor: null,
      loading: false,
    };
  },
  mounted() {
    this.getTemplate();
  },
  methods: {
    async getTemplate() {
      if (this.currentRow.visitRuleId) {
        const res = await this.$api["data/returnVisit/getTemplateByLinkId"]({ id: this.currentRow.visitRuleId });
        if (res.code !== 200) return this.$message.error("获取咨询模板失败");
        this.templateData = res.data;
      } else {
        this.templateData.template = '';
      }
      // console.log(this.currentRow.visitRuleId, this.templateData, '回访Id：visitRuleId');
      this.editor = new Editor({
        content: this.templateData.template,
        onUpdate: ({ state, getHTML, getJSON, transaction }) => {
          this.templateData.template = getHTML();
        },
      });
    },
    async balanceSubmit() {
      console.log(this.templateData.template, 'this.templateData.template');
      this.loading = true;
      const res = await this.$api['data/returnVisit/updatestatus']({ id: this.currentRow.id, returnVisitInfo: this.templateData.template });
      this.loading = false;
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success("修改回访记录成功");
      this.$emit("handleSuccess");
    },
    handleClose() {
      this.$emit("handleClose");
    },
  },
};
</script>
<style lang="scss" scoped>
.pull-right{
  float: right;
}
.font-color{
  color:#FF6600;
}
.button-color{
  color:#0099FF;
  border-color:#0099FF;
}
.clear{
  clear: both;
}
.el-col,.el-col-12{
  line-height: 40px;
}
.box {
border: 1px solid #9baed3;
// width: 40%;
}
.dialog-magin-y{
  margin: 0 150px;
}
/deep/.ProseMirror p{
  margin: 0 !important;
}
.editor__content{
  height: 120px;
}
</style>
